<template>
  <div class="home-main">
    <!-- banner -->
    <div style="position: relative">
      <div
        class="banner"
        :style="{
          backgroundImage: banners[bannerIndex]
            ? `url(${banners[bannerIndex].imgUrl})`
            : '',
        }"
      ></div>
      <!-- <a href="#" class="book-button">立即预订</a> -->

      <div class="search-area flx-col-e-c">
        <div class="flx-row-s-c" style="margin-bottom: 10px">
          <div
            class="index-item"
            v-for="index in banners.length"
            :class="{ active: index - 1 === bannerIndex }"
            :key="'bl' + index"
            @click.stop="clickChangeBanner(index - 1)"
          ></div>
        </div>
        <div class="flx-row-s-c" style="background-color: #fff">
          <div class="item flx-col-s-c">
            <div class="item-font flx-row-bw-c">
              <span>{{ searchList[searchSelect].name }}</span>
              <i class="down-icon"></i>
            </div>
            <div class="list-area flx-col-s-c">
              <div
                v-for="(item, index) in searchList"
                :key="index"
                class="list-area-item"
                @click="searchSelect = index"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <input
            v-model.trim="search"
            type="text"
            class="search-input"
            :placeholder="`请输入您要搜索的域名，如：190${
              searchSelect == 1 ? '.vip' : ''
            }`"
            maxlength="50"
            @keyup.enter="submit"
          />
          <div class="user-strong-button search-button" @click="submit">
            搜索
          </div>
        </div>
      </div>
    </div>
    <!-- 公告 -->
    <div class="notice-area">
      <div class="middle flx-row-s-c notice-area-main">
        <i class="notice-logo"></i>
        <div class="flx-col scroll-area">
          <div
            :class="{ scroll: currentNotice != 0 }"
            :style="{ transform: `translateY(-${currentNotice * 63}px)` }"
            @mouseenter="clearCarouselNoticeInterval"
            @mouseleave="carouselNotice"
          >
            <div
              class="flx-row-s-c"
              v-for="(item, index) in noticeList"
              :key="'nl-' + index"
            >
              <div class="flx-row-s-c w-p-100">
                <ul class="flx-row-s-s">
                  <li
                    class="notice-list flx-row-s-c"
                    v-for="item2 in item"
                    :key="item2.id"
                  >
                    <a
                      :href="`/newsd?id=${item2.id}`"
                      target="_blank"
                      class="info"
                      >{{ item2.title }}</a
                    >
                    <span class="time">{{
                      item2.releaseTime.substr(0, 10)
                    }}</span>
                  </li>
                </ul>
              </div>
              <router-link to="/newsl?tab=6" class="more">更多></router-link>
            </div>
            <!-- <div class="flx-row-s-c">
              <div class="flx-row-s-c w-p-100">
                <ul class="flx-row-s-s">
                  1
                  <li
                    class="notice-list flx-row-s-c"
                    v-for="(item, index) in noticeList.slice(0, 3)"
                    :key="'nl-' + index"
                  >
                    <a
                      :href="`/newsd?id=${item.id}`"
                      target="_blank"
                      class="info"
                      >{{ item.title }}</a
                    >
                    <span class="time">{{
                      item.releaseTime.substr(0, 10)
                    }}</span>
                  </li>
                </ul>
              </div>
              <router-link to="/newsl" class="more">更多></router-link>
            </div>
            <div class="flx-row-s-c">
              <div class="flx-row-s-c w-p-100">
                <ul class="flx-row-s-s">
                  <li
                    class="notice-list flx-row-s-c"
                    v-for="(item, index) in noticeList.slice(0, 3)"
                    :key="'nl-' + index"
                  >
                    <a
                      :href="`/newsd?id=${item.id}`"
                      target="_blank"
                      class="info"
                      >{{ item.title }}</a
                    >
                    <span class="time">{{
                      item.releaseTime.substr(0, 10)
                    }}</span>
                  </li>
                </ul>
              </div>
              <router-link to="/newsl" class="more">更多></router-link>
            </div>
            <div class="flx-row-s-c">
              <div class="flx-row-s-c w-p-100">
                <ul class="flx-row-s-s">
                  <li
                    class="notice-list flx-row-s-c"
                    v-for="(item, index) in noticeList.slice(0, 3)"
                    :key="'nl-' + index"
                  >
                    <a
                      :href="`/newsd?id=${item.id}`"
                      target="_blank"
                      class="info"
                      >{{ item.title }}</a
                    >
                    <span class="time">{{
                      item.releaseTime.substr(0, 10)
                    }}</span>
                  </li>
                </ul>
              </div>
              <router-link to="/newsl?tab=6" class="more">更多></router-link>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <card title="热门预订" class="mg-t-20" href="/dnbooking">
        <span slot="top-info" style="color: #898989" v-if="bookTotal"
          >今日有<font style="color: #f9521f">{{ bookTotal }}</font
          >个域名可以抢注预订</span
        >
        <div slot="main" class="hot-book-area flx-row-s-s">
          <book-item
            v-for="(item, index) in hotBookList"
            :key="index"
            :info="item"
            class="mg-t-20"
            :class="{ 'item-mr': (index + 1) % 5 != 0 }"
          ></book-item>
        </div>
      </card>
      <div class="flx-row-bw mg-t-20">
        <card title="热门竞价" class="hot-bidding-area" href="/dnbidding">
          <div slot="main" class="hot-bidding-area-main flx-row-s-s">
            <bidding-item
              v-for="(item, index) in hotBiddingList"
              :key="index"
              :info="item"
              :index="index"
              class="mg-t-10"
              :class="{ 'item-mr-10': (index + 1) % 3 != 0 }"
            ></bidding-item>
          </div>
        </card>
        <card title="竞价成功案例" class="bid-success-area" padding="20">
          <div
            slot="main"
            class="bid-success-area-main flx-row-s-s"
            :style="{
              maxHeight:
                hotBiddingList.length < 4
                  ? '230px'
                  : hotBiddingList.length < 7
                  ? '400px'
                  : '590px',
            }"
          >
            <table class="table w-p-100">
              <tbody>
                <template v-for="(item, index) in successList">
                  <tr
                    style="height: 30px"
                    :key="'l' + index"
                    @click="showContent(index)"
                  >
                    <td class="index" v-if="index == 0">
                      <div class="first"></div>
                    </td>
                    <td class="index" v-else-if="index == 1">
                      <div class="sec"></div>
                    </td>
                    <td class="index" v-else-if="index == 2">
                      <div class="thi"></div>
                    </td>
                    <td class="index" style="text-align: center" v-else>
                      {{ index + 1 }}
                    </td>
                    <td
                      class="url"
                      :title="item.domainName"
                      @click="toDetail(item.id)"
                    >
                      {{ item.domainName }}
                    </td>
                    <td class="money">￥{{ item.price }}</td>
                    <td class="icon">
                      <div
                        v-if="item.barrageText"
                        class="dir-icon"
                        :class="{ 'dir-icon-active': item.contentShow }"
                      ></div>
                    </td>
                  </tr>
                  <div
                    class="content-area"
                    :key="'i' + index"
                    :class="{ 'content-area-active': item.contentShow }"
                  >
                    <div
                      class="main-area flx-row-s-c"
                      v-if="item.contentShow"
                      :class="{ 'main-area-active': item.contentInfoShow }"
                    >
                      <div class="flx-row-s-c scroll" :style="item.style">
                        <div
                          class="subtitle-area"
                          :ref="'content' + index"
                          v-html="item.barrageText"
                        ></div>
                        <div
                          class="subtitle-area"
                          style="margin-left: 60px"
                          v-if="item.long"
                          v-html="item.barrageText"
                        ></div>
                      </div>
                    </div>
                  </div>
                </template>
              </tbody>
            </table>
          </div>
        </card>
      </div>
      <div
        class="flx-row-bw mg-t-20"
        v-if="consultTypeList != null && consultTypeList.length > 0"
      >
        <card
          v-for="(item, index) in consultTypeList.slice(0, 3)"
          :key="'ct' + index"
          :title="item.name"
          class="bottom-list-area"
          :href="`/newsl?tab=${item.id}`"
        >
          <div slot="main" class="list-area-main">
            <a
              v-for="(innerItem, InnerIndex) in item.consultList"
              :key="'li' + InnerIndex"
              :href="`/newsd?id=${innerItem.id}`"
              target="_blank"
              class="list-item"
            >
              <div
                class="flx-row-bw-c"
                :class="{ 'b-b-d': InnerIndex < item.consultList.length - 1 }"
              >
                <span class="name" :title="innerItem.title">{{
                  innerItem.title
                }}</span>
                <span class="time">{{
                  innerItem.releaseTime.substr(0, 10)
                }}</span>
              </div>
            </a>
          </div>
        </card>
        <!-- <card title="企业域名" class="bottom-list-area" href="#">
          <div slot="main" class="list-area-main">
            <router-link to="#" class="list-item" v-for="(item, index) in companyDomain" :key="index">
              <div class="flx-row-bw-c" :class="{'b-b-d': index < companyDomain.length - 1}">
                <span class="name" :title="item.name">{{ item.name }}</span>
                <span class="time">{{ item.time }}</span>
              </div>
            </router-link>
          </div>
        </card> -->
        <!-- <card title="域名百科" class="bottom-list-area" href="#">
          <div slot="main" class="list-area-main">
            <router-link to="#" class="list-item" v-for="(item, index) in domainEncyclopedia" :key="index">
              <div class="flx-row-bw-c" :class="{'b-b-d': index < domainEncyclopedia.length - 1}">
                <span class="name" :title="item.name">{{ item.name }}</span>
                <span class="time">{{ item.time }}</span>
              </div>
            </router-link>
          </div>
        </card> -->
      </div>
      <div class="friend-link-area flx-row-s-s">
        <span>友情链接:</span>
        <div class="friend-link-list flx-row-s-s">
          <a
            v-for="(item, index) in friendLinkList"
            :key="index"
            :href="item.url"
            :target="item.isNofflow == 0 ? '_self' : '_blank'"
            >{{ item.name }}</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { filter } from "lodash";
import { hotBooking, hotBidding, biddingSuccess, getHome } from "@/api/data";
import { timeFormat } from "@/utils/format";
export default {
  name: "VipHome",
  components: {
    card: () => import("_c/card/card.vue"),
    bookItem: () => import("_c/bookItem/bookItem.vue"),
    biddingItem: () => import("_c/biddingItem/biddingItem.vue"),
  },
  data() {
    return {
      carouselInterval: null,
      carouselTimeOut: null,
      banners: [],
      bannerIndex: 0,
      searchList: [
        {
          name: "搜域名",
          id: 0,
        },
        {
          name: "查whois",
          id: 1,
        },
      ],
      searchSelect: 0,
      search: "",
      noticeList: [],
      currentNotice: 0,
      carouselNoticeInterval: null,
      bookTotal: null,
      hotBookList: [],
      hotBiddingList: [],
      successList: [],
      consultTypeList: [],
      companyDomain: [],
      announcementList: [],
      domainEncyclopedia: [],
      friendLinkList: [],
    };
  },
  created() {
    this.getHome();
    this.hotBooking();
    this.hotBidding();
    this.hotInterval = setInterval(() => {
      this.hotBidding();
    }, 1000 * 60);
    this.biddingSuccess();
  },
  beforeDestroy() {
    clearInterval(this.carouselInterval);
    clearInterval(this.carouselNoticeInterval);
  },
  methods: {
    ...mapActions(["commitHome"]),
    _chunk(data, n) {
      const result = [];
      for (let index = 0; index < data.length; index += n) {
        result.push(data.slice(index, index + n));
      }
      return result;
    },
    // 即将结束开启定时器
    startTime() {
      let total = 5;
      if (this.interval) {
        clearInterval(this.interval);
      }
      // 判断是否有竞价未结束的域名
      let progressList = filter(this.hotBiddingList, (o) => {
        return new Date(o.endTime).getTime() > this.$moment();
      });
      // 开启定时器
      this.forEachData();
      if (progressList.length > 0) {
        this.length = progressList.length;
        this.interval = setInterval(() => {
          if (total === 0) {
            total = 5;
            let progressList = filter(this.hotBiddingList, (o) => {
              return new Date(o.endTime).getTime() > this.$moment();
            });
            this.length = progressList.length;
          }
          if (this.length === 0) {
            // 所有竞价结束关闭定时器
            clearInterval(this.interval);
          }
          this.forEachData(true);
          total -= 1;
        }, 1000);
      }
    },
    forEachData(isCount) {
      this.hotBiddingList = this.hotBiddingList.map((o) => {
        let endTimeStr = "已结束",
          tempCountDown = this.$moment(o.endTime),
          currentTime = this.$moment();
        let duration = tempCountDown.diff(currentTime);
        if (duration <= 0) {
          isCount && (this.length -= 1);
          endTimeStr = "已结束";
        } else {
          endTimeStr =
            timeFormat({
              val: duration,
              format: "DD天HH时mm分ss秒",
              isSubstitute: true,
              isCut: true,
            }) === ""
              ? "已结束"
              : timeFormat({
                  val: duration,
                  format: "DD天HH时mm分ss秒",
                  isSubstitute: true,
                  isCut: true,
                });
        }
        return { ...o, endTimeStr };
      });
    },
    /**
     * @description 点击圆点后清除原有定时器，切换banner并设置新的定时器。
     * @param index 点击的原点的index
     */
    clickChangeBanner(index) {
      if (this.bannerIndex === index) return;
      this.bannerIndex = index;
      clearInterval(this.carouselInterval);
      if (this.carouselTimeOut != null) {
        clearTimeout(this.carouselTimeOut);
        this.carouselTimeOut = null;
      }
      this.carouselTimeOut = setTimeout(() => {
        this.carousel();
      }, 6000);
    },

    /**
     * @description 设置切换banner定时器。
     */
    carousel() {
      this.carouselInterval = setInterval(() => {
        this.bannerIndex =
          this.bannerIndex >= this.banners.length - 1 ? 0 : ++this.bannerIndex;
      }, 6000);
    },
    // 获取首页的内容
    async getHome() {
      let res = await getHome({
        source: 0,
      });
      if (res.code == 200) {
        this.banners = res.data.bannerList;
        this.carousel();
        if (res.data.noticedList.length > 0) {
          this.noticeList = this._chunk(res.data.noticedList, 3);
        }
        this.consultTypeList = res.data.consultTypeList;
        this.friendLinkList = res.data.linkList;
        this.carouselNotice();
      }
    },
    // 搜索
    submit() {
      if (this.searchSelect == 0) {
        if (this.search == null || this.search == "") {
          this.$Message.warning("请输入您要搜索的域名");
          return;
        }
        this.$router.push({
          name: "dmsearch",
          query: {
            key: this.search,
          },
        });
      }
    },
    showContent(index) {
      if (
        this.successList[index].isBarrage == 0 ||
        !this.successList[index].barrageText
      )
        return;
      if (this.successList[index].contentShow == true) {
        // 打开时
        this.successList[index].contentInfoShow = false;
        if (this.successList[index].interval != null) {
          clearInterval(this.successList[index].interval);
          this.successList[index].style = "";
        }
        setTimeout(() => {
          this.successList[index].contentShow = false;
        }, 300);
      } else {
        // 未打开时
        this.successList[index].contentShow = true;
        setTimeout(() => {
          this.successList[index].contentInfoShow = true;
          setTimeout(() => {
            if (this.successList[index].long == null) {
              this.checkLong(index);
            }
            if (this.successList[index].long) {
              this.successList[index].style =
                this.successList[index].styleString;
              this.successList[index].interval = setInterval(() => {
                this.successList[index].style = "";
                setTimeout(() => {
                  this.successList[index].style =
                    this.successList[index].styleString;
                }, 600);
              }, this.successList[index].width * 30 + 600);
            }
          }, 300);
        }, 300);
      }
    },
    // 获取成功竞价案例content的宽度并决定是否滚动
    checkLong(index) {
      let item = "content" + index;
      let contentWidth = this.$refs[item][0].clientWidth;
      this.successList[index].width = contentWidth + 60;
      if (contentWidth > 208) {
        this.successList[index].long = true;
        this.successList[index].styleString = `transition-duration: ${
          this.successList[index].width * 0.03
        }s; transform: translateX(-${this.successList[index].width}px);`;
      } else this.successList[index].long = false;
    },
    // 获取热门预订
    async hotBooking() {
      let res = await hotBooking({ limit: 15 });
      if (res.code == 200) {
        this.hotBookList = res.data.bookingList;
        this.bookTotal = res.data.total;
      }
    },
    // 获取热门竞价
    async hotBidding() {
      let res = await hotBidding({ limit: 9 });
      if (res.code == 200) {
        this.hotBiddingList = res.data;
        this.startTime();
      }
    },
    async biddingSuccess() {
      let res = await biddingSuccess();
      if (res.code == 200) {
        let temp = res.data;
        for (let i in temp) {
          if (temp[i].isBarrage == 1) {
            temp[i].contentShow = false;
            temp[i].contentInfoShow = false;
            temp[i].long = null;
            temp[i].width = 0;
            temp[i].interval = null;
            temp[i].style = "";
            temp[i].styleString = "";
          }
        }
        this.successList = temp;
      }
    },
    // 竞价成功案例跳转到详情
    toDetail(id) {
      // this.$router.push({
      //   name: "biddingdetail",
      //   query: {
      //     id: id,
      //   },
      // });
      window.location.href = `/bidding/${id}`;
    },
    // 设置切换notice定时器。
    carouselNotice() {
      this.carouselNoticeInterval = setInterval(() => {
        this.currentNotice++;
        if (this.currentNotice == 3) {
          setTimeout(() => {
            this.currentNotice = 0;
          }, 500);
        }
      }, 6000);
    },
    // 关闭切换notice定时器
    clearCarouselNoticeInterval() {
      clearInterval(this.carouselNoticeInterval);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-main {
  background-color: #f2f2f2;

  .banner {
    max-width: 1920px;
    min-width: 1200px;
    width: 100%;
    margin: 0 auto;
    height: 420px;
    @include bg-setting();
  }

  .search-area {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
    background-color: rgba($color: #373737, $alpha: 0.4);
    padding-bottom: 15px;
    .index-item {
      @include size(30px, 4px);
      @include h-c(#ffffff, #f9521f);
      cursor: pointer;
      margin: 0 9px;

      &.active {
        background-color: #f9521f;
      }
    }
    .item {
      width: 112px;
      height: 50px;
      // border-right: 1px solid #c3c3c3;
      font-size: 16px;
      position: relative;
      background-color: #fff;
      cursor: pointer;

      .item-active {
        color: #f9521f !important;
      }
      .item-font {
        position: relative;
        transition: color 0.3s;
        line-height: 50px;
        color: rgba(#333333, 0.8);
        width: 100%;
        padding: 0 15px;

        .down-icon {
          display: inline-block;
          @include size(12px, 7px);
          @include bg-setting("g-down");
          transition: background-image 0.3s;
          margin-left: 5px;
        }
      }
      .list-area {
        min-width: 112px;
        position: absolute;
        font-size: 12px;
        line-height: 40px;
        box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
        top: 50px;
        left: 50%;
        transform: translate(-50%, 10px);
        z-index: -1;
        opacity: 0;
        transition: all 0.5s;

        .list-area-item {
          display: block;
          white-space: nowrap;
          width: 100%;
          padding: 0 10px;
          font-size: 14px;
          @include h-c(
            #ffffff,
            #fedcd2,
            rgba(#333333, 0.6),
            rgba(#a79e9b, 0.9)
          );
          text-align: center;
        }
      }
      &:hover .item-font {
        color: #f9521f;
      }
      &:hover .down-icon {
        @include bg-setting("o-down");
      }
      &:hover .list-area {
        transform: translate(-50%, 0);
        z-index: 5;
        opacity: 1;
      }
    }
    .search-input {
      height: 50px;
      width: 657px;
      line-height: 50px;
      padding: 0 30px;
      font-size: 16px;
      border-left: 1px solid #c3c3c3;
      background-color: #fff;
    }
    .search-button {
      @include size(170px, 50px);
      font-size: 20px;
      font-weight: 600px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
  }

  .notice-area {
    background-color: #ffffff;
    .notice-area-main {
      height: 63px;
      font-size: 16px;

      .notice-logo {
        display: inline-block;
        @include size(93px, 36px);
        @include bg-setting("notice");
      }
      ul {
        width: 1031px;
        height: 63px;
        overflow: hidden;
        flex-wrap: wrap;
        margin-left: 10px;
      }
      .scroll-area {
        height: 63px;
        overflow: hidden;

        .scroll {
          transition: all 0.5s;
        }
      }
      .notice-list {
        max-width: 309px;
        line-height: 63px;
        margin-right: 34px;

        &::before {
          content: "";
          display: inline-block;
          @include size(4px);
          border-radius: 50%;
          background-color: #f9521f;
          margin-right: 8px;
          margin-bottom: 3px;
          flex-shrink: 0;
        }

        .info {
          width: 100%;
          color: #616161;
          @include h-c(null, null, #616161, #f9521f);
          @include f-ell-sin;
        }

        .time {
          color: #898989;
          flex-shrink: 0;
          margin-left: 10px;
        }
      }
      .more {
        color: #f9521f;
        flex-shrink: 0;
      }
    }
  }

  .hot-book-area {
    padding: 20px 30px 30px;
    flex-wrap: wrap;
  }

  .hot-bidding-area {
    width: 873px;

    .hot-bidding-area-main {
      padding: 30px;
      flex-wrap: wrap;
    }
  }

  .bid-success-area {
    width: 311px;

    .bid-success-area-main {
      padding: 11px 20px;
      overflow: hidden;
      .table {
        table-layout: fixed;
        word-break: break-all;
      }
      tr {
        height: 30px;
        overflow: hidden;
        color: #3a3a3a;
        cursor: pointer;

        .index {
          width: 25px;
          transition: color 0.3s;

          div {
            height: 26px;
          }
          .first {
            @include bg-setting("first");
          }
          .sec {
            @include bg-setting("sec");
          }
          .thi {
            @include bg-setting("thi");
          }
        }

        .url {
          text-align: left;
          padding-left: 7px;
          width: auto;
          @include f-ell-sin;
          transition: color 0.3s;
          width: 53%;
          cursor: pointer;
        }
        .money {
          text-align: right;
          transition: color 0.3s;
          overflow: hidden;
          white-space: nowrap;
        }
        .icon {
          width: 15px;
          padding-left: 3px;

          .dir-icon {
            @include size(12px, 6px);
            @include bg-setting("g-down");
            transform: rotate(-90deg);
            transition: transform 0.3s, background-image 0.3s;
          }
          .dir-icon-active {
            transform: rotate(0);
          }
        }

        &:hover {
          color: #f9521f;

          .dir-icon {
            @include bg-setting("o-down");
          }
        }
      }
      .content-area {
        width: 271px;
        @include flx(row, e);
        overflow: hidden;
        height: 0;
        transition: height 0.3s;
        .main-area {
          width: 238px;
          background-color: #f2f2f2;
          padding: 0 15px;
          overflow: hidden;
          opacity: 0;
          transition: opacity 0.3s;

          .scroll {
            flex-shrink: 0;
            transition-property: transform;
            transition-timing-function: linear;
            // transition: opacity .3s;
            // transition: transform linear .3s;
          }

          .subtitle-area /deep/ {
            color: #888888;
            line-height: 0;
            font-size: 0;
            text-align: left;
            transition: auto 0.3s;
            flex-shrink: 0;

            i {
              color: #f9521f;
              font-style: normal;
            }
          }
        }
      }
      .content-area-active {
        height: 30px !important;
      }
      .main-area-active {
        opacity: 1 !important;
        .subtitle-area {
          line-height: 30px !important;
          font-size: 14px !important;
        }
      }
    }
  }

  .bottom-list-area {
    width: 392px;
    .list-area-main {
      padding: 7px 0;

      .list-item {
        display: block;
        font-size: 14px;
        padding: 0 28px;
        background-color: #ffffff;
        transition: background-color 0.3s;
        &:hover {
          background-color: #fa6335;

          .name,
          .time {
            color: #ffffff;
          }
        }
        div {
          height: 50px;
        }
        .b-b-d {
          border-bottom: rgba($color: #000000, $alpha: 0.2) dashed 1px;
        }
        .name {
          width: 100%;
          @include f-ell-sin;
          text-align: left;
          transition: color 0.3s;
          color: #4d4d4d;
        }

        .time {
          flex-shrink: 0;
          margin-left: 10px;
          transition: color 0.3s;
          color: rgba(#4d4d4d, 0.7);
        }
      }
    }
  }

  .friend-link-area {
    padding: 30px 0 11px;
    font-size: 12px;
    line-height: 14px;
    color: #424242;
    & > span {
      flex-shrink: 0;
    }
    .friend-link-list {
      flex-wrap: wrap;
      width: 100%;

      a {
        margin-bottom: 5px;
        display: inline-block;
        padding: 0 10px;
        border-right: 1px solid #424242;
        @include h-c(null, null, #424242, #f9521f);
        flex-shrink: 0;
      }
    }
  }
}
.mg-t-20 {
  margin-top: 20px;
}
.mg-t-10 {
  margin-top: 10px;
}
.item-mr {
  margin-right: 25px;
}
.item-mr-10 {
  margin-right: 10px;
}
</style>
